<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #div1 {
        width: 200px;
        height: 400px;
        background: rgb(216, 206, 206);
        float: left;
    }

    #div2 {
        width: 200px;
        height: 400px;
        background: rgb(216, 206, 206);
        float: left;
    }

    #div3 {
        float: left;
        width: 140px;
        height: 140px;
    }

    #btn1 {
        width: 60px;
        height: 60px;
        background: rgb(0, 81, 255);
        border-radius: 50%;
        margin-left: 30px;
        margin-top: 100px;
    }

    #btn2 {
        width: 60px;
        height: 60px;
        background: rgb(0, 81, 255);
        border-radius: 50%;
        margin-left: 30px;
    }
</style>

<body>
    <div id="div1">
        <input type="checkbox" id="ipt1">列表一 <br>
        <input type="checkbox" class="it">备选项1<br>
        <input type="checkbox" class="it">备选项2<br>
        <input type="checkbox" class="it">备选项3<br>
        <input type="checkbox" class="it">备选项4<br>
        <input type="checkbox" class="it">备选项5<br>

    </div>
    <div id="div3">
        <button id="btn1"> > </button><br>
        <button id="btn2">
            《 </button> </div> <div id="div2">
                <input type="checkbox" id="ipt2">列表二<br><br>
                <input type="checkbox" class="itt">备选项6<br>
                <input type="checkbox" class="itt">备选项7<br>
                <input type="checkbox" class="itt">备选项8<br>
                <input type="checkbox" class="itt">备选项9<br>
                <input type="checkbox" class="itt">备选项10<br>
    </div>
</body>

<script>
   var  inputt = document.getElementById('#ipt');
   var dd = document.getElementsByClassName('it')
//    var spann = document.querySelector('#div4').querySelectorAll('input')
//    console.log(spann);

ipt1.onclick = function(){
    for (var i = 0 ; i < dd.length ; i++){
        if(ipt1.checked = true){
      dd[i].checked = true     
        }else if(ipt1.checked = false){
            dd[i].checked = false    
        }
    
}
ipt2.onclick = function(){
    for (var j = 0 ; j < dd.length ; j++){
        if(ipt2.checked = true){
      dd[i].checked = true     
        }else if(ipt2.checked = false){
            dd[i].checked = false    
        }
    
}   
    // for (var j = 0 ; j < it.length ; j ++){
    //     it[j].checked = false
    // }    
    }
}

</script>

</html>